<template>
  <section class="hero parallax shadow-lg d-flex align-items-center" id="home">
    <div class="cta mx-auto mt-2">
      <h1 class="mt-0 mb-4">I'm Extra Xue<span class="dot"></span></h1>
      <transition name="el-fade-in">
        <p v-show='motto!==""' class="mb-4 motto">{{ motto }}</p>
      </transition>
      <a href="https://extraxue.gitee.io/extraxue-markdown-cv/" class="float-left btn btn-default btn-lg mr-3"
         target="_blank">
        <i class="icon-grid"/>Resume
      </a>
<!--      <div class="spacer d-md-none d-lg-none d-sm-none" data-height="10"></div>-->
      <a href="mailto:howardxue123@foxmail.com" class="float-left btn btn-border-light btn-lg"><i
          class="icon-envelope"></i>Mail me
      </a>
    </div>
    <div class="overlay"></div>
  </section>
</template>

<script>

import {getMottoAPI} from "@/components/utils/api";

export default {
  name: "section_motto",

  data() {
    return {
      motto: ""
    }
  },

  mounted() {
    this.getMotto()
  },

  methods: {
    isShow() {
      this.sshow = !this.sshow
    },
    getMotto() {
      getMottoAPI().then(res => {
        if (res.res_code === 200) {
          this.motto = res.res_data.m_words
        }
      }).catch(err => {
        console.error(err)
      })
    },
  }
}
</script>

<style scoped>
</style>